var city ="北京";
function s(){
    //选项卡
    var nav = document.querySelectorAll(".nav > li");
    var main = document.querySelectorAll(".main > div");
    for(var i= 0; i<nav.length; i++){
        nav[i].index = i;
        nav[i].addEventListener('click',function(){
            for(var j = 0; j<nav.length; j++){
                nav[j].classList.remove("active");
                main[j].classList.remove("active");
            }
            //console.log(this.index);
            this.classList.add("active");
            main[this.index].classList.add("active");
        })
    }
    var xmlhttp;
    if (window.XMLHttpRequest){
        xmlhttp=new XMLHttpRequest();
    }else{
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            var kk =JSON.parse(xmlhttp.responseText);
            console.log(kk);
            //今天的信息
            document.querySelector("#city").innerHTML = kk.basic.city;
            document.querySelector("#temperature").innerHTML = kk.now.fl;
            document.querySelector("#trendMin").innerHTML = kk.daily_forecast[0].tmp.min;
            document.querySelector("#trendMax").innerHTML = kk.daily_forecast[0].tmp.max;
            document.querySelector("#now").innerHTML = kk.now.cond.txt;
            document.querySelector("#feng").innerHTML = kk.now.wind.dir;
            document.querySelector("#yifu").innerHTML = kk.suggestion.drsg.txt;
            var kk2 = document.querySelector(".temperature");
            var tubiao =  document.querySelector(".tubiao2");
            if(kk.now.cond.txt =="晴"){
                document.querySelector("body").style.background = "url('img/day_0.jpg')no-repeat";
                document.querySelector("body").style.backgroundSize = "100%";
                tubiao.style.background = "url('img/w0.png')no-repeat";
                tubiao.style.backgroundSize = "100%";
            }else if(kk.now.cond.txt =="多云"){
                document.querySelector("body").style.background = "url('img/body-bg.jpg')no-repeat";
                document.querySelector("body").style.backgroundSize = "100%";
                kk2.appendChild(tubiao);
                tubiao.className = "tubiao2";
                tubiao.style.background = "url('img/w1.png')no-repeat";
                tubiao.style.backgroundSize = "100%";
            }else if(kk.now.cond.txt =="阴"){
                document.querySelector("body").style.background = "url('img/body-bg.jpg')no-repeat";
                document.querySelector("body").style.backgroundSize = "100%";
                kk2.appendChild(tubiao);
                tubiao.className = "tubiao2";
                tubiao.style.background = "url('img/w2.png')no-repeat";
                tubiao.style.backgroundSize = "100%";
            }else if(kk.now.cond.txt =="小雨"||kk.now.cond.txt =="中雨"||kk.now.cond.txt =="大雨"){
                document.querySelector("body").style.background = "url('img/day_3.jpg')no-repeat";
                document.querySelector("body").style.backgroundSize = "100%";
                kk2.appendChild(tubiao);
                tubiao.className = "tubiao2";
                tubiao.style.background = "url('img/w7.png')no-repeat";
                tubiao.style.backgroundSize = "100%";
            }else if(kk.now.cond.txt =="中雨"){
                document.querySelector("body").style.background = "url('img/day_3.jpg')no-repeat";
                document.querySelector("body").style.backgroundSize = "100%";
                kk2.appendChild(tubiao);
                tubiao.className = "tubiao2";
                tubiao.style.background = "url('img/w8.png')no-repeat";
                tubiao.style.backgroundSize = "100%";
            }else if(kk.now.cond.txt =="大雨"){
                document.querySelector("body").style.background = "url('img/day_3.jpg')no-repeat";
                document.querySelector("body").style.backgroundSize = "100%";
                kk2.appendChild(tubiao);
                tubiao.className = "tubiao2";
                tubiao.style.background = "url('img/w8.png')no-repeat";
                tubiao.style.backgroundSize = "100%";
            }
            //时刻信息
            var times = document.querySelector("#text2");
            //console.log(kk.hourly_forecast);
            var timesText = kk.hourly_forecast;
            for (let jk = 0; jk<timesText.length; jk++){
                var sc = timesText[jk];
                //console.log(sc);
                var sums = document.createElement("div");
                times.appendChild(sums);
                sums.className ="timeStyle";
                var spanone = document.createElement("p");
                var spanTwo = document.createElement("p");
                var spanTherr = document.createElement("p");
                var spanForr = document.createElement("p");
                spanone.innerHTML = timesText[jk].date;
                spanTwo.innerHTML = timesText[jk].cond.txt;
                spanTherr.innerHTML = timesText[jk].tmp;
                spanForr.innerHTML = timesText[jk].wind.dir;
                spanTherr.className = "spanone";
                spanone.className = "spanone";
                spanTwo.className = "spanone";
                sums.appendChild(spanone);
                sums.appendChild(spanTwo);
                sums.appendChild(spanTherr);
                sums.appendChild(spanForr);
            }
            //七天信息
            var times2 = document.querySelector("#text3");
            var timesText2 = kk.daily_forecast;
            console.log(timesText2);
            for (let jk2 = 0; jk2<timesText2.length; jk2++){
                var sums2 = document.createElement("div");
                times2.appendChild(sums2);
                sums2.className ="timeStyle";
                var spanone2 = document.createElement("p");
                var spanTwo2 = document.createElement("p");
                var spanTherr2 = document.createElement("p");
                var spanForr2 = document.createElement("p");
                var spanTherr21 = document.createElement("span");
                var spanTherr22 = document.createElement("span");
                var spanTherr23 = document.createElement("span");
                var spanTherr24 = document.createElement("span");
                spanone2.innerHTML = timesText2[jk2].date;
                spanTwo2.innerHTML = timesText2[jk2].cond.txt_d;
                spanForr2.innerHTML = timesText2[jk2].wind.dir;
                spanTherr21.innerHTML = timesText2[jk2].tmp.max;
                spanTherr22.innerHTML = timesText2[jk2].tmp.min;
                spanTherr23.innerHTML ="/";
                spanTherr24.innerHTML ="℃";
                spanTherr2.appendChild(spanTherr21);
                spanTherr2.appendChild(spanTherr23);
                spanTherr2.appendChild(spanTherr22);
                spanTherr2.appendChild(spanTherr24);
                spanTherr2.className = "spanone";
                spanone2.className = "spanone";
                spanTwo2.className = "spanone";
                sums2.appendChild(spanone2);
                sums2.appendChild(spanTwo2);
                sums2.appendChild(spanTherr2);
                sums2.appendChild(spanForr2);
            }
        }
    };
    xmlhttp.open("GET","https://bird.ioliu.cn/weather?city=" + city,true);
    xmlhttp.send();
}
s();
document.querySelector("#ipt").addEventListener('change',function(){
    city = this.value;
    s()
});